@extends('layouts.normal')
@section('self-style')
    <link rel="stylesheet" href="/package/plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/package/plugins/select2/select2.min.css">
    <style type="text/css">
        .bs-bars {
            width: 80%;
            margin: 10px 0;
            line-height: 34px;
        }
        .bootstrap-table .fixed-table-toolbar button {color: inherit;}
        .pagination-detail .btn-group button {color: inherit;}
        table .btn {margin-left: 10px;}
        .modal input[type="radio"] {margin-left: 20px;margin-right: 10px;}
        .modal .modal-footer button {margin-left: 40px;margin-right: 40px;}
    </style>
@endsection

@section('menu')
@include("finance.layouts.menu")
@endsection

@section("header")
    <section class="content-header">
        <h4>
            水电气管理
            <b>/</b>
            水费列表
        </h4>
    </section>
@endsection

@section('content')
    <section class="content">
        <div class="row">
            <!-- /.col -->
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header">
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="fee-table" data-height="600"></table>
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
@endsection


@section('modal')
    <div class="modal fade" id="view-fee-dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">水费详情</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal m-t">
                        <div class="form-group">
                            <label class="control-label col-sm-4"></label>
                            <div class="col-sm-8"><input type="hidden" class="fee-id" /></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">公寓名称：</label>
                            <div class="col-sm-8"><span class="apart-name"></span></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">承租人姓名：</label>
                            <div class="col-sm-8">
                                <span class="rent-user-name"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">结算时间范围：</label>
                            <div class="col-sm-8">
                                <span class="fee-time"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">上期水量（吨）：</label>
                            <div class="col-sm-8">
                                <span class="last-process"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">本期水量（吨）：</label>
                            <div class="col-sm-8">
                                <span class="fee-process"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">需结算水量（吨）：</label>
                            <div class="col-sm-8">
                                <span class="fee-num"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">需交水费（元）：</label>
                            <div class="col-sm-8">
                                <span class="fee"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">支付类型：</label>
                            <div class="col-sm-8">
                                <label><input type="radio" name="pay-type" value="1" />现金支付</label>
                                <label><input type="radio" name="pay-type" value="2" />支付宝支付</label>
                                <label><input type="radio" name="pay-type" value="3" />银行卡转账</label>
                                <label><input type="radio" name="pay-type" value="4" />工资扣除</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4"></label>
                            <div class="col-sm-8">
                                <label><input type="checkbox" class="fee-status" value="2" />费用已支付</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">备注：</label>
                            <div class="col-sm-8">
                                <textarea class="form-control fee-remark"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-left btn-save">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="view-pay-dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">支付详情</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal m-t">
                        <div class="form-group">
                            <label class="control-label col-sm-4"></label>
                            <div class="col-sm-8"><input type="hidden" class="rent-id" /></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">公寓名称：</label>
                            <div class="col-sm-8"><span class="apart-name"></span></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">承租人姓名：</label>
                            <div class="col-sm-8">
                                <span class="rent-user-name"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">上期水量（吨）：</label>
                            <div class="col-sm-8">
                                <span class="last-process"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">本期水量（吨）：</label>
                            <div class="col-sm-8">
                                <span class="fee-process"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">需结算水量（吨）：</label>
                            <div class="col-sm-8">
                                <span class="fee-num"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">需交水费（元）：</label>
                            <div class="col-sm-8">
                                <span class="fee"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">支付状态：</label>
                            <div class="col-sm-8">
                                <span class="pay-type"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">支付时间：</label>
                            <div class="col-sm-8">
                                <span class="pay-at"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">订单号：</label>
                            <div class="col-sm-8">
                                <span class="pay-order"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="delete-fee-dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除水费记录</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal m-t">
                        <div class="form-group">
                            <label class="control-label col-sm-3"></label>
                            <div class="col-sm-9">
                                您确定删除【本条水费记录】吗?
                                <input type="hidden" class="fee-id">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary pull-left btn-save">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection



@section('self-script')
    <script src="/package/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/package/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/package/plugins/select2/select2.full.min.js"></script>
    <script src="/package/plugins/select2/i18n/zh-CN.js"></script>
    <script type="text/javascript" src="/js/finance/fee-water.js?v={{ time() }}"></script>
@endsection